import { QuestionOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Card } from "antd-mobile";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { loadDepartmentsAPI } from "../services/doctors";
import "./css/docs.scss";
const DocsPage = () => {
  const navigate = useNavigate();
  const [departments, setDepartments] = useState([]);
  useEffect(() => {
    loadDepartmentsAPI().then((res) => {
      setDepartments(res.data);
    });
  }, []);
  return (
    <div>
      <Button color="primary" fill="solid">
        Solid
      </Button>
      <input
        type="text"
        placeholder="搜素症状/疾病/药品/医生/科室"
        className="input"
      />
      {/* <MessageOutlined /> */}
      <div
        className="ques"
        onClick={() => {
          navigate("/home/quiz");
        }}
      >
        <a className="aTop">
          <QuestionOutlined />
          <span className="spanTop">快速提问</span>
        </a>
        <p style={{ fontSize: "20px", marginLeft: "25vw" }}>
          描述症状,自动匹配医生解答
        </p>
      </div>
      <div
        className="ques"
        onClick={() => {
          navigate("/home/doctors");
        }}
      >
        <a className="aTop">
          <UserOutlined />
          <span className="spanTop">找医生</span>
        </a>
        <p style={{ fontSize: "20px", marginLeft: "25vw" }}>
          科室快速找到医生，对症咨询
        </p>
      </div>
      <div className="ques">
        <p style={{ fontSize: "20px", marginLeft: "25vw" }}>
          热门科室{" "}
          <span style={{ float: "right", marginRight: "10vw" }}>更多 &gt;</span>
        </p>
        <div className="eight">
          {departments.map((item: any) => (
            <a className="aMiddle" key={item.id}>
              {item.name}
            </a>
          ))}
        </div>
      </div>
    </div>
  );
};

export default DocsPage;
